<template>
<!-- 我的 -->
  <div class="order-list">
    <div class="search">
      <div class="operate">
        <van-dropdown-menu active-color="#1989fa">
          <van-dropdown-item v-model="orderStatus" :options="statusList" @change="handleStatus" />
        </van-dropdown-menu>
        <van-search left-icon="search" v-model="orderName" :clearable="false" placeholder="请输入名称搜索" @search="handleSearch" />
      </div>
      <div class="order-head">
        <div class="title">我的工单</div>
        <div class="total">共计 {{ total }} 条工单</div>
      </div>
    </div>
    <div class="order-list-content">
      <van-list
        v-model="loading"
        loading-text="加载中"
        :finished="finished"
        finished-text="没有更多了"
        @load="onload"
      >
        <div class="order-list-view">
          <div class="list-item" v-for="item in list" :key="item.orderId" @click="handleOpenDetail(item)">
            <div class="item-name">
              <div class="item-title">{{ item.orderId }}</div>
              <div class="item-status"><van-tag plain type="warning">{{ item.statusName }}</van-tag></div>
            </div>
            <div class="item-info">名称：{{ item.orderName }}</div>
            <div class="item-tag">
              <van-tag v-if="item.orderType" plain type="primary">{{ item.orderType }}</van-tag>
              <van-tag v-if="item.serviceName" plain type="success">{{ item.serviceName }}</van-tag>
            </div>
            <div class="item-desc">
              <div class="item-label"><van-icon name="clock-o" />{{ item.planFinishTime }}</div>
              <van-tag v-if="item.orderStatus == '0'" type="danger" @click.stop="handleDelete(item)">删除</van-tag>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { Dialog, Toast } from 'vant'
import { draftList, delDraft } from '@/api/order.js'

export default {
  data() {
    return {
      statusList: [
        { text: '全部', value: '' },
        { text: '已发', value: '1' },
        { text: '草稿', value: '0' },
      ],
      orderStatus: '',
      orderName: '',
      queryParams: {
        pageNum: 1,
        pageSize: 15
      },
      loading: false,
      finished: false,
      total: 0,
      list: [],
    }
  },
  beforeDestroy() {
    Toast.clear()
  },
  methods: {
    async loadData(force) {
      // 改变搜索条件，重新查询
      if ( force ) {
        this.queryParams.pageNum = 1
        this.list = []
        this.finished = false
      }
      this.loading = true
      const params = {
        orderName: this.orderName,
        orderStatus: this.orderStatus,
        ...this.queryParams
      }
      const res = await draftList(params)
      const { result, success } = res
      if(success) {
        if(result.records.length < this.queryParams.pageSize) {
          Toast({
            message: '已全部加载',
            duration: 500,
            position: 'bottom',
            forbidClick: 'true'
          })
          this.finished = true
        }
        this.list = this.list.concat(result.records)
        this.total = result.total
        this.loading = false
        Toast.clear()
      }
    },
    onload() {
      this.loading = false
      if(this.finished === false) {
        Toast({
          type:'loading',
          duration: 0,
          message: '正在加载',
          position: 'bottom',
          forbidClick: 'true'
        })
        this.queryParams.pageNum = parseInt(this.queryParams.pageNum) + 1
        this.loadData()
      } else {
        Toast({
          message: '已全部加载',
          duration: 500,
          position: 'bottom',
          forbidClick: 'true'
        })
      }
    },
    handleStatus(val) {
      this.orderStatus = val
      this.loadData(true)
    },
    handleSearch(val) {
      this.orderName = val
      this.loadData(true)
    },
    handleOpenDetail(item) {
      if(item.orderStatus == '0') {
        this.$open.call(this, '/order/edit', { orderId: item.orderId })
      } else {
        this.$open.call(this, '/order/info', { orderId: item.orderId })
      }
    },
    // 删除
    handleDelete(item) {
      Dialog.confirm({
        message: `确定要删除草稿工单【${item.orderName}】？`,
      })
      .then(async () => {
        const res = await delDraft({ orderId: item.orderId })
        const { success, message } = res
        if(success) {
          this.loadData(true)
          this.$emit('upload')
        } else {
          Dialog.alert({ message })
        }
      })
      .catch(() => {
        
      })
    },
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/less/order.less';
.operate {
  display: flex;
  align-items: center;
  .van-dropdown-menu {
    width: 90px;
    /deep/ .van-dropdown-menu__bar {
      height: 54px;
      box-shadow: none;
    }
  }
  .van-search {
    flex: 1;
  }
}
</style>
